<template>
  <div>
    <div class="header">
      <div class="header-content">
        <a class="h-left">
          <img src="../assets/img/other/keTangLogo.png" alt="logo" style="max-height: 28px;">
        </a>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path:'/main' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path:'/classDetail/courseContent'}">课堂内容</el-breadcrumb-item>
          <el-breadcrumb-item>作业详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="h-right">
          <div class="ai-tools">
            Ai工具集
            <span class="word-hot">New</span>
          </div>
          <div class="page-check">
            <el-dropdown @command="paperCheck">
              <div style="display: flex;margin-top: 11px;">
                <img src="../assets/img/homework/book.png" alt="book">
                <span style="font-size: 20px;">论文查重</span>
                <span class="hot">Hot</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">论文查重</el-dropdown-item>
                <el-dropdown-item command="b">答辩PPT</el-dropdown-item>
                <el-dropdown-item command="c">ai写作指导平台</el-dropdown-item>
                <el-dropdown-item command="d">笔灵</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="reference">
            <i class="el-icon-s-claim"></i>
            <span>任务管理</span>
          </div>
          <el-popover
              popper-class="area_popper"
              placement="bottom-start"
              trigger="click"
          >
            <div class="notice">
              <el-tabs v-model="notice" @tab-click="noticeClick">
                <el-tab-pane label="全部" name="first"></el-tab-pane>
                <el-tab-pane label="教学活动" name="second"></el-tab-pane>
                <el-tab-pane label="教务通知" name="third"></el-tab-pane>
                <el-tab-pane label="系统通知" name="fourth"></el-tab-pane>
              </el-tabs>
              <div class="notice-foot">
                <div class="btn">
                  <i class="el-icon-check"></i>
                  <el-button type="text">一键标为已读</el-button>
                </div>
                <div class="btn">
                  <i class="el-icon-view"></i>
                  <el-button type="text">查看全部</el-button>
                </div>
              </div>
            </div>
            <div slot="reference"><i class="el-icon-bell new"></i></div>
          </el-popover>
          <el-dropdown @command="personal()" trigger="click">
            <div><img src="../assets/img/other/user.png" alt="ha" class="header-img"></div>
            <el-dropdown-menu>
              <el-dropdown-item command="a"><i class="el-icon-bank-card"></i>开通VIP</el-dropdown-item>
              <el-dropdown-item command="b"><i class="el-icon-link"></i>机构用户认证</el-dropdown-item>
              <el-dropdown-item command="c"><i class="el-icon-setting"></i> 个人设置</el-dropdown-item>
              <el-dropdown-item command="d"><i class="el-icon-right"></i> 退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="view-work">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="详情" name="first">
          <div class="work-detail">
            <div class="work-header">
              <div class="card-list">
                <span class="tip-work">作业</span>
                <div class="main">
                  <header class="flex-align">
                    <div class="h-left">
                      <div class="title flex-align">
                        <h4>{{ homework.workTitle }}</h4>
                      </div>
                    </div>
                    <div class="h-right" style="font-size: 14px;">
                    </div>
                  </header>
                  <div class="tag">
                    <el-tag>{{ homework.workType }}</el-tag>
                    <el-tag>提交起止时间:{{ homework.issueTime }} ~ {{ homework.overTime }}</el-tag>
                    <el-tag type="info">{{ homework.sore }}</el-tag>
                    <el-tag type="info">查重</el-tag>
                    <el-tag type="info">允许超时提交</el-tag>
                  </div>
                  <div class="work-describe">
                    <p style="font-size: 20px;"> {{ homework.workOther }}</p>
                  </div>
                  <div class="state"></div>
                  <div class="file-show" v-show="haveFile">
                    <div class="attachment">
                      <div class="left">
                        <img
                            src="https://assets.ketangpai.com/openapiv5/Public/Common/img/fileicon/file_ext_big_doc.png"
                            alt="docx"
                            style="width: 33px;height: 40px;">
                      </div>
                      <div class="right">
                        <h3>大学英语附带文档</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card-main">
              <section>
                <div class="top flex-align">
                  <div class="left">
                    <img src="../assets/img/other/user.png" alt="头像"
                         style="width: 40px;height: 40px;border-radius: 50%;">
                  </div>
                  <div class="right">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="说点什么吧"
                        v-model="textarea">
                    </el-input>
                  </div>
                </div>
                <div class="comment-tools flex-align">
                  <el-checkbox v-model="checked">实名发表</el-checkbox>
                  <div class="upload">
                    <el-upload
                        action="str"
                        class="upload-demo"
                        multiple
                        :show-file-list="false"
                        :file-list="fileList"
                    >
                      <span style="margin-left: 16px; margin-right: 16px;">
                      <i class="el-icon-24gl-paperclip"></i>
                      <el-button type="text" style="font-size: 17px;">添加附件</el-button>
                      </span>
                    </el-upload>
                  </div>
                  <el-button type="primary">发表评论</el-button>
                </div>

              </section>
              <section class="comment-list">
                <h1 class="flex-align ">
                  全部评论
                  <span style="color: #74787c;padding: 0 8px; font-size: 14px;">共0条</span>
                </h1>
                <div class="no-data">
                  <div class="img-box">
                    <img src="../assets/img/main/nodate.png" alt="no-data">
                    暂无数据
                  </div>
                </div>
              </section>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="提交作业" name="second" v-if="role==='student'">
          <div class="submit">
            <div class="detail-header">
              <div class="header-title">
                <div class="flex-align layout">
                  <img src="../assets/img/homework/pen.png" alt="pen">
                  <div class="otherName">
                    <span class="label-type">{{ homework.activity }}</span>
                  </div>
                </div>
                <div class="layout-right">
                  <header class="flex-align" style="margin-bottom: 0;justify-content: space-between">
                    <div>
                      <div class="title flex-align">
                        <h4>{{ homework.workTitle }}</h4>
                      </div>
                    </div>
                    <div style="text-align: right;font-size: 20px;">

                    </div>
                  </header>
                  <div class="tag">
                    <el-tag>{{ homework.workType }}</el-tag>
                    <el-tag>提交起止时间:{{ homework.issueTime }} ~ {{ homework.overTime }}</el-tag>
                    <el-tag type="info">{{ homework.sore }}</el-tag>
                    <el-tag type="info">查重</el-tag>
                    <el-tag type="info">允许超时提交</el-tag>
                  </div>
                  <div style="margin-top: 16px;color: #3c4043;"></div>
                </div>
              </div>
              <div class="right-btn">
                <div style="color: #4285f4;font-size: 17px;">
                  <span style="margin-left: 38px; cursor: pointer;">
                    <i class="el-icon-view"></i>
                    查看谁交了
                  </span>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="submit-box">
              <div class="flex-between" style="margin-bottom: 30px;">
                <div style="font-size: 23px;">提交内容</div>
                <el-button type="primary" @click="submitWork()">确认提交</el-button>
              </div>
              <div class="load-box">
                <div style="margin-bottom: 16px; font-size: 20px;">作业附件</div>
                <el-upload
                    action="str"
                    class="upload-demo"
                    :before-remove="beforeRemove"
                    :on-success="uploadSuccess"
                    :http-request="handlerChange"
                    multiple
                    :show-file-list="false"
                    :file-list="fileList"
                >
                  <div class="contain">
                    <p>
                      <i class="el-icon-shangchuan icon"></i>
                    </p>
                    <p>点击上传添加作业文件</p>
                    <p class="tip">支持各类文档、图片、代码、压缩包格式</p>
                  </div>
                </el-upload>
                <div class="attachment-layout">
                  <div class="attachment flex-align" style="margin-top: 16px;padding: 10px;" v-for="item in fileList"
                       :key="item.uid">
                    <div class="left">
                      <img src="https://assets.ketangpai.com/openapiv5/Public/Common/img/fileicon/file_ext_big_doc.png"
                           alt="docx" style="width: 33px;height: 40px;">
                    </div>
                    <div class="center">
                      <h3>{{ item.name }}</h3>
                      <span class="desc">{{ item.size }}KB</span>
                    </div>
                    <i class="el-icon-delete" style="cursor:pointer;" @click="removeFile(item.uid)"></i>
                  </div>
                </div>
                <div style="margin-top: 24px;margin-bottom: 16px;font-size: 20px;">
                  作业留言
                  <span class="tip" style="font-size: 14px;">选填</span>
                </div>
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="作业以附件形式提交，留言仅作备注使用哦！"
                    v-model="textarea">
                </el-input>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="批阅" name="third" v-else>
          <div class="check-work">
            <div class="check-header">
              <div class="check-title">{{ homework.workTitle }}</div>
            </div>
            <div class="check-top">
              <ul class="top1">
                <el-tag>截止时间:{{ homework.overTime }}</el-tag>
                <el-tag>{{ homework.workType }}</el-tag>
                <el-tag type="info">{{ homework.sore }}</el-tag>
                <el-tag type="info">查重</el-tag>
              </ul>
              <div class="top2">
                <el-switch
                    v-model="hideGrade"
                    active-color="#4285F4"
                    inactive-color="#DADCE0">
                </el-switch>
                <span v-if="!hideGrade">对学生显示成绩</span>
                <span v-else>对学生隐藏成绩</span>
                <div class="top-icon">
                  <div class="el-icon-download"></div>
                  <span style="margin-left: 5px;">下载作业报表</span>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="flex-between check-main">
              <div class="title-list">
                <el-button round v-for="(item,index) in listButton" :key="index"
                           :class="{'selected': selectedButton === index}" @click="choice(index)">{{ item }}
                </el-button>
              </div>
              <div class="searchBox">
                <el-input placeholder="学生姓名搜索" v-model="studentName" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </div>
            <div class="nav">
              <el-form :model="searchForm" ref="searchForm" class="demo-ruleForm el-form--inline">
                <el-form-item label="提交状态" prop="submitState">
                  <el-select v-model="searchForm.submitState" placeholder="不限">
                    <el-option label="按时交" value="按时交"></el-option>
                    <el-option label="超时交" value="超时交"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="相似度" prop="similarity">
                  <el-select v-model="searchForm.similarity" placeholder="不限">
                    <el-option label="0~50%" value="0~50%"></el-option>
                    <el-option label="50%~70%" value="50%~70%"></el-option>
                    <el-option label="70%~90%" value="70%~90%"></el-option>
                    <el-option label="90%~100%" value="90%~100%"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分享状态" prop="shareState">
                  <el-select v-model="searchForm.shareState" placeholder="不限">
                    <el-option label="未分享" value="未分享"></el-option>
                    <el-option label="已分享" value="已分享"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="按成员分组" prop="grouping">
                  <el-select v-model="searchForm.grouping" placeholder="不限">
                  </el-select>
                </el-form-item>
                <br>
                <el-form-item label="作业字数" prop="workCount">
                  <el-input v-model="searchForm.workCount1" placeholder="请输入内容" style="width: 100px"></el-input>
                  <span>-</span>
                  <el-input v-model="searchForm.workCount2" placeholder="请输入内容" style="width: 100px"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="list-box">
              <el-divider></el-divider>
              <div class="flex-align flex-between">
                <div>
                  <el-dropdown>
                    <el-button type="primary" class="good-button">
                      批量给分<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>统一给分</el-dropdown-item>
                      <el-dropdown-item>批量给分</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button type="primary" class="good-button" :disabled="isSelect">
                    打回作业
                  </el-button>
                  <el-dropdown>
                    <el-button type="primary" class="good-button">
                      下载<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>下载选中的全部文档</el-dropdown-item>
                      <el-dropdown-item>下载全部的作业文档</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <el-button type="primary" class="good-button" :disabled="isSelect">
                    变更为已交
                  </el-button>
                </div>
                <div>
                  <el-button>
                    <span>
                      <i class="el-icon-refresh-right"></i>
                      <span style="margin-left: 5px;">作业文件无法在线预览？点此试试</span>
                    </span>
                  </el-button>
                  <el-button>
                    转存所有文件到资料模块
                  </el-button>
                  <el-button type="primary">一键催交</el-button>
                </div>
              </div>
              <el-divider></el-divider>
              <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="姓名/学号"
                    width="120"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="所属标签"
                    width="120"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="similarity"
                    label="相似度"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="submitState"
                    label="提交状态"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="workCount"
                    label="字数"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="reviews"
                    label="批阅次数"
                    sortable>
                </el-table-column>
                <el-table-column
                    prop="grade"
                    label="成绩"
                    sortable>
                  <template slot-scope="scope">
                   <span v-if="typeof scope.row.grade === 'number' || scope.row.grade === ''">
                     <el-input
                         type="text"
                         autosize
                         v-model="scope.row.grade"
                     >
                     </el-input>
                   </span>
                    <span style="color: red;font-size: 20px;"
                          v-else-if="scope.row.grade === undefined || scope.row.grade === null">
                      未交
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="operation"
                    label="操作"
                >
                  <template slot-scope="scope">
                    <el-button type="text" v-if="scope.row.operation">催交</el-button>
                    <el-button type="text" v-else @click="enterReview(scope.row)">进入批阅</el-button>
                  </template>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-dropdown trigger="click" @command="handleCommand(scope,command)">
                      <div class="but-more">
                      <span>
                        <i class="el-icon-gengduo high-light" style="font-size: 26px;"></i>
                      </span>
                      </div>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>打回</el-dropdown-item>
                        <el-dropdown-item>提交历史</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      activeName: "",
      notice: "first",
      workTitle: "",
      workType: "",
      issueTime: "",
      overTime: "",
      sore: "",
      workOther: "",
      textarea: "",
      checked: true,
      fileList: [],
      haveFile: false,
      homework: "",
      formatRestrictions: [],
      role: "",
      hideGrade: true,
      listButton: [],
      selectedButton: 0,
      allStudent: [],
      unSubmitStudent: [],
      unapprovedStudent: [],
      approvedStudent: [],
      unSubmitState: [],
      unapprovedState: [],
      approvedState: [],
      searchForm: {
        submitState: "",
        similarity: "",
        shareState: "",
        grouping: "",
        workCount1: "",
        workCount2: "",
      },
      studentName: "",
      isSelect: false,
      tableData: [],
      nowGrade: ""
    }
  },
  methods: {
    paperCheck(command) {
      console.log(command)
    },
    personal(command) {
      if (command === "d") {
        localStorage.removeItem("token")
        localStorage.removeItem("role")
        this.jumpToHome()
      }
    },
    handleClick(tab, event) {
    },
    noticeClick(tab, event) {
      console.log(tab, event);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadSuccess(response, file, fileList) {
      this.fileList = []
      this.fileList = fileList
    },
    handlerChange(param) {
      let formData = new FormData();
      formData.append('file', param.file);
      formData.append('username', localStorage.getItem("username"))
      formData.append('homeworkId', this.homework.uuid)
      // 假设 formData 是你已经创建好的 FormData 实例
      this.request.post("/uploadFile", formData, {}).then(res => {
        if (res === "文件上传成功") {
          // 如果上传成功，调用param.onSuccess来通知el-upload组件
          param.onSuccess(res);
          this.$message.success(res);
        } else {
          // 如果上传失败，调用param.onError来通知el-upload组件
          param.onError(new Error(res));
          this.$message.error(res);
        }
      }).catch(err => {
        // 捕获异常，调用param.onError来通知el-upload组件
        param.onError(err);
        this.$message.error("上传失败");
      });
    },
    submitWork() {
      if (this.fileList.length !== 0) {
        this.$confirm('成功提交后，作业截至时间前且老师未批改本作业时，可随时正常更新提交的作业', '确认提交', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request.post("/submitHomeWork", {
            homeworkId: this.homework.uuid,
            username: localStorage.getItem("username")
          }).then(res => {
            if (res === "提交作业成功") {
              this.$message.success(res)
            } else {
              this.$message.error(res)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message.error("请上传作业附件")
      }
    },
    removeFile(uuid) {
      this.$confirm('是否要取消上传该文件？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.fileList.findIndex(item => item.uuid === uuid);
        // console.log(index)
        if (index === -1) {
          this.fileList.splice(index, 1);
          // console.log(this.fileList)
          // this.$forceUpdate()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    choice(index) {
      switch (index) {
        case 0:
          let tableData1 = this.unapprovedStudent.map(item => ({
            name: item.name + item.studentId,
            label: "默认标签",
            similarity: "0%",
            submitState: "超时提交",
            workCount: 1000,
            reviews: 1,
            grade: this.generateUnApprovedGrade(item.uuid),
            operation: false
          }));
          let tableData2 = this.unSubmitStudent.map(item => ({
            name: item.name + item.studentId,
            label: "默认标签",
            similarity: "0%",
            submitState: "超时提交",
            workCount: 1000,
            reviews: 1,
            grade: null,
            operation: true
          }));
          let tableData3 = this.approvedStudent.map(item => ({
            name: item.name + item.studentId,
            label: "默认标签",
            similarity: "0%",
            submitState: "超时提交",
            workCount: 1000,
            reviews: 1,
            grade: this.generateApprovedGrade(item.uuid),
            operation: false
          }));
          this.tableData = tableData1.concat(tableData2, tableData3)
          break;
        case 1:
          if (this.unapprovedStudent.length === 0) {
            this.tableData = null
          } else {
            this.tableData = this.unapprovedStudent.map(item => ({
              name: item.name + item.studentId,
              label: "默认标签",
              similarity: "0%",
              submitState: "超时提交",
              workCount: 1000,
              reviews: 1,
              grade: this.generateUnApprovedGrade(item.uuid),
              operation: false
            }))
          }
          console.log(this.tableData)
          break;
        case 2:
          if (this.approvedStudent.length === 0) {
            this.tableData = null
          } else {
            this.tableData = this.approvedStudent.map(item => ({
              name: item.name + item.studentId,
              label: "默认标签",
              similarity: "0%",
              submitState: "超时提交",
              workCount: 1000,
              reviews: 1,
              grade: this.generateApprovedGrade(item.uuid),
              operation: false
            }))
          }
          break;
        case 3:
          if (this.unSubmitStudent.length === 0) {
            this.tableData = null
          } else {
            this.tableData = this.unSubmitStudent.map(item => ({
              name: item.name + item.studentId,
              label: "默认标签",
              similarity: "0%",
              submitState: "超时提交",
              workCount: 1000,
              reviews: 1,
              grade: null,
              operation: true
            }))
          }
          console.log(this.tableData)
          break;
        default:
          this.$message.error("获取出错")
      }
      this.selectedButton = index
    },
    getStudentHomeWork() {
      this.request.post("/getStudentHomeWork", {
        homeworkId: this.homework.uuid
      }).then(res => {
        this.unSubmitStudent = res.unSubmitStudents
        this.unapprovedStudent = res.unapprovedStudents
        this.approvedStudent = res.approvedStudents
        this.unSubmitState = res.unSubmitStates
        this.unapprovedState = res.unapprovedStates
        console.log(this.unapprovedState)
        this.approvedState = res.approvedStates
        this.listButton.push("全部(" + (this.unSubmitStudent.length + this.unapprovedStudent.length + this.approvedStudent.length) + ")")
        this.listButton.push("未批(" + this.unapprovedStudent.length + ")")
        this.listButton.push("已批(" + this.approvedStudent.length + ")")
        this.listButton.push("未交(" + this.unSubmitStudent.length + ")")
      })
    },
    handleSelectionChange() {

    },
    enterReview(row) {
      let studentNumber = row.name
      this.$store.commit("courseInformation/setFile", {
        studentNumber: studentNumber,
        homeworkId: this.homework.uuid
      })
      this.$router.push("/correctWork")
    },
    generateUnApprovedGrade(studentId) {
      const item = this.unapprovedState.find(stateItem => stateItem.studentId === studentId);
      return item ? item.sore : null;
    },
    generateApprovedGrade(studentId) {
      const item = this.approvedState.find(stateItem => stateItem.studentId === studentId);
      return item ? item.sore : null;
    }
  },
  beforeMount() {
    this.role = localStorage.getItem("role")
    this.activeName = this.role === 'teacher' ? "third" : "second"
  },
  mounted() {
    this.homework = this.information.homework;
    this.getStudentHomeWork()
  }
  ,
  computed: {
    ...mapState({information: state => state.courseInformation.homework}),

  }
  ,
  watch: {
    fileList(newValue) {
      this.fileList = newValue
    },
  }
}
</script>

<style scoped>
img {
  border: none;
}

span {
  border: none;
}

.header {
  height: 64px;
  width: 100%;
  margin-bottom: 12px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #ccc;
}

.header-content {
  position: fixed;
  background-color: #fff;
  z-index: 999;
  top: 0;
  left: 0;
  height: 64px;
  width: 100%;
  padding: 0 24px;
  min-width: 900px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 0 0 #dfdfdf;
}

.h-left {
  cursor: pointer;
}

.h-right {
  display: flex;
  align-items: center;
}

.ai-tools {
  font-size: 20px;
  margin-right: 40px;
  cursor: pointer;
}

.word-hot {
  margin-top: -10px;
  position: absolute;
  margin-left: 0;
  width: 20px;
  height: 14px;
  color: #fd0f0f;
  font-size: 12px;
  font-weight: 700;
}

.page-check {
  margin-right: 10px;
  cursor: pointer;
}

.hot {
  width: 20px;
  height: 14px;
  color: #fd0f0f;
  font-size: 12px;
  font-weight: 700;
  margin-top: -9px;
}

.reference {
  font-size: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 12px;
  position: relative;
}

.notice {
  margin-top: 10px;
  padding: 0 45px;
}

::v-deep .el-tabs__item {
  font-size: 21px;
  padding: 0 25px;
  height: 50px;
}

::v-deep .el-tabs__active-bar {
  height: 3px;
}

.notice-foot {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: #4285f4;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  font-size: 18px;
  cursor: pointer;
  width: 50%;
  height: 50px;
  line-height: 50px;
}

.btn i {
  margin-right: 8px;
}

.btn > .el-button {
  font-size: 18px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

::v-deep .el-dropdown-menu__item {
  font-size: 16px;
  line-height: 55px;
}

::v-deep .el-breadcrumb {
  font-size: 17px;
  flex: 1;
  padding: 0 42px;
}

.header-img {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.new {
  font-size: 30px;
  margin-right: 18px;
}

::v-deep .view-work .el-tabs__header {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 24px;
}

::v-deep .el-tabs__nav-wrap::after {
  display: none;
}

.work-detail {
  width: 70%;
  margin: 0 auto;
  padding-top: 12px;
  padding-bottom: 40px;
}

.work-header {
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 12px;
}

.card-list {
  width: 100%;
  display: flex;
  position: relative;
}

.tip-work {
  position: absolute;
  background: #31ccd2;
  color: #fff;
  font-size: 20px;
  left: -12px;
  top: -12px;
  border-bottom-right-radius: 4px;
  text-align: center;
  padding: 8px;
}

.main {
  width: 100%;
  margin-top: 44px;
}

.flex-align {
  margin-bottom: 0;
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.title {
  line-height: 20px;
}

.title h4 {
  font-size: 22px;
  font-weight: 500;
  margin-right: 5px;
  max-width: 670px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag {
  padding: 15px 0;
}

::v-deep .el-tag {
  font-size: 16px;
  margin-right: 6px;
}

.work-describe {
  margin: 20px 0;
}

.state {
  margin-top: 16px;
  color: #3c4043;
  font-size: 14px;
}

.attachment {
  position: relative;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
}

.top {
  margin-top: 24px;
  padding: 12px;
  border-bottom: 2px solid #4285f4;
  background: #f8f9fa;
}

.card-main .right {
  flex: 1;
}

::v-deep .card-main .right .el-textarea textarea {
  background: #f8f9fa;
  border: 0;
  min-height: 31px;
}

::v-deep .el-textarea {
  font-size: 20px;
}

.comment-tools {
  margin: 16px 0;
  justify-content: flex-end;
  color: #3c4043;
  font-size: 20px;
}

::v-deep .el-checkbox__inner::after {
  height: 10px;
  left: 8px;
}

::v-deep .el-checkbox__inner {
  width: 20px;
  height: 20px;
}

::v-deep .el-checkbox__label {
  font-size: 17px;
}

.upload-demo {
  display: flex;
  flex-direction: column;
}

.comment-list {
  margin-top: 16px;
}

.comment-list h1 {
  line-height: 24px;
  color: #3c4043;
  font-size: 20px;
}

.no-data {
  padding-bottom: 12px;
  height: max-content;
  padding-top: 100px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: #74787c;
  line-height: 24px;
  margin-bottom: 30px;
}

.no-data .img-box {
  padding-bottom: 12px;
}

.img-box img {
  height: 184px;
  display: block;
  margin: 0 auto;
}

.submit {
  width: 70%;
  margin: 0 auto;
  font-size: 20px;
}

.detail-header {
  position: relative;
}

.header-title {
  width: 100%;
  display: flex;
  position: relative;
}

.layout {
  flex-direction: column;
  min-width: 55px;
  margin-right: 16px;
  font-size: 12px;
}

.layout img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.otherName {
  position: relative;
//margin-top: 5px; line-height: 33px; display: inline-block; width: 85px; text-align: center; //max-height: 31px; margin-bottom: 2px;
}

.label-type {
  color: #3c4043;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65px;
  max-height: 30px;
  line-height: 15px;
  word-break: break-all;
  display: inline-block;
  text-align: center;
}

.layout-right {
  width: 100%;
}

.right-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.submit-box {
  margin-bottom: 24px;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.load-box {
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 24px;
  position: relative;
}

.contain {
  padding: 40px;
  background: #f8f9fa;
  height: 200px;
  text-align: center;
  color: #4285f4;
  cursor: pointer;
  margin-bottom: 24px;
}

.contain p:first-child {
  margin-bottom: 16px;
}

.contain .icon {
  font-size: 50px;
  cursor: pointer;
}

.contain p:nth-child(2) {
  margin-bottom: 8px;
}

.tip {
  color: #74787c;
  margin-left: 8px;
}

::v-deep .el-upload-dragger {
  border: none;
  height: auto;
  width: auto;
}

.center {
  margin: 0 16px;
  flex: 1;
}

.center h3 {
  font-size: 16px;
  font-weight: 500;
}

.center .desc {
  font-size: 12px;
  color: #74787c;
}

.check-work {
  width: 70%;
  margin: 0 auto;
  font-size: 12px;
  background-color: #fff;
}

.check-header {
  display: flex;
  justify-content: space-between;
}

.check-title {
  font-size: 22px;
//font-family: PingFangSC, PingFangSC-Medium, serif; font-weight: 500; text-align: left; color: #3c4043;
}

.check-top {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  margin-bottom: 15px;
}

.top2 {
  display: block;
  flex-direction: row;
//font-family: PingFangSC, PingFangSC-Medium, serif; font-weight: 500; text-align: left; color: #4285f4; line-height: 8px;
}

.top2 span {
  font-size: 20px;
  margin-left: 5px;
}

::v-deep .top2 .el-switch {
  margin-top: -4px;
}

.top-icon {
  display: inline-block;
  margin-left: 12px;
  cursor: pointer;
}

.el-icon-download {
  width: 20px;
  height: 21px;
}

.el-icon-download:before {
  font-size: 20px;
}

.check-main {
  padding: 24px 0;
}

.selected {
  background: #e8f0ff;
  color: #1967d2;
}

::v-deep .el-form--inline .el-form-item {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}

::v-deep .el-form--inline .el-form-item__content {
  display: inline-block;
  vertical-align: top;
}

::v-deep .nav .el-form-item {
  margin-right: 16px;
}

.nav .el-form-item__content span {
  padding: 0 9px;
}

.good-button {
  display: inline-block;
  color: #4285f4;
  width: 104px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  margin-left: 24px;
  padding: 0;
  background: #fff;
}

::v-deep .el-table .el-table__cell {
  text-align: center;
}
</style>
